﻿@model IEnumerable<TrainingManagerSystem.WebUI.TrainingManagerSystemService.CertificateRefund>
<div class="box-title">
    <h3>
        <i class="icon-bar-chart"></i>
        Certificate
    </h3>                            
</div>
<div class="box-content nopadding fix-height-300" style="height: 200px; overflow: auto">
    <table class="table table-hover table-nomargin" id="table-Certificate">
        <thead>
            <tr>
                <th>Certificate Name</th>
                <th>Provider</th>
                <th>Completed Date</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model) {
                <tr>
                    <td>
                        <a class="acc" href="#" data-certificateId="@item.CertificateId">@item.Certificate</a>
                    </td>
                    <td>
                        @item.Provider
                    </td>
                    <td>
                        @if (item.CompleteDate != null) {
                            @item.CompleteDate.Value.ToString("dd-MMM-yyyy")
                        }
                       
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
<div class="home-details" id="personCertificate">
    <div class='acTitle'>
        Detail Certificate
    </div>
    <table style='margin: 15px; width: 100%' id="table-result">
        <tr>
            <td class='label bold twentyFivePercent'>
                Certificate Id
            </td>
            <td class='twentyFivePercent'>
                <div id="CertificateId">
                </div>
            </td>
            <td class='label bold twentyFivePercent'>
                Certificate Provider Name
            </td>
            <td class='twentyFivePercent'>
                <div id="CertificateProvider"></div>
            </td>
        </tr>
        <tr>
            <td class='label bold twentyFivePercent'>
                Certificate Name
            </td>
            <td class='twentyFivePercent' id="CertificateName"></td>
            <td class='label bold twentyFivePercent'>
                Time Commit
            </td>
            <td class='twentyFivePercent' id="TimeCommit"></td>
        </tr>
        <tr>
            <td class='label bold twentyFivePercent'>
                Certificate Category Name
            </td>
            <td class='twentyFivePercent' id="CertificateCategory">
                
            </td>
            <td class='label bold twentyFivePercent'>
                Note
            </td>
            <td class='twentyFivePercent' id="Note"></td>
        </tr>
    </table>
</div>
<script src="~/Content/Scripts/jquery-1.7.1.min.js"> </script>
<script src="~/Content/Scripts/jquery.dataTables.min.js"> </script>
<script src="~/Content/Scripts/jquery.dataTables.min.js"> </script>
<script src="~/Content/Scripts/jquery.bpopup.min.js"> </script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#personCertificate").hide();
        $("#table-Certificate tr td a").click(function() {
            $.ajax({
                url: '/AccountCertificate/DetailCertificatePopup',
                type: 'POST',
                data: { certificateId: $(this).attr('data-certificateId') },
                dataType: 'json',
                success: function(data) {
                    $("#CertificateId").html(data.CertificateId);
                    $("#CertificateProvider").html(data.CertificateProviderName);
                    $("#CertificateName").html(data.CertificateName);
                    $("#TimeCommit").html(data.TimeCommit);
                    $("#CertificateCategory").html(data.CertificateCategoryName);
                    $("#Note").html(data.Note);
                    $("#personCertificate").bPopup();
                },
                error: function() {
                    alert('Error!');
                }
            });
        });
    });

</script>